<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>GridManager:在Vue中使用</title>
	<!--引入 GridManager 依赖-->
	<link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
	<script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
	<!--引入vue 依赖-->
	<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<vue-grid-manager></vue-grid-manager>
	</div>
<script>
	var colData = [
		{
			key: 'name',
			remind: 'the name',
			width: '100px',
			text: '名称',
			sorting: ''
		},{
			key: 'info',
			remind: 'the info',
			text: '使用说明'
		},{
			key: 'url',
			remind: 'the url',
			text: 'url'
		},{
			key: 'createDate',
			remind: 'the createDate',
			width: '100px',
			text: '创建时间',
			sorting: 'DESC',
			template: function(createDate, rowObject){
				return new Date(createDate);
			}
		},{
			key: 'lastDate',
			remind: 'the lastDate',
			width: '100px',
			text: '最后修改时间',
			sorting: '',
			template: function(lastDate, rowObject){
				return new Date(lastDate);
			}
		},{
			key: 'action',
			remind: 'the action',
			width: '100px',
			text: '操作',
			template: function(action, rowObject){
				return '<span class="plugin-action edit-action" learnLink-id="'+rowObject.id+'">编辑</span>'
						+'<span class="plugin-action del-action" learnLink-id="'+rowObject.id+'">删除</span>';
			}
		}];
	var option = {
		gridManagerName: "testVue",
		height: "400px",
		columnData: colData,
		supportRemind: true,
		isCombSorting:  true,
		supportAjaxPage: true,
		supportSorting: true,
		ajax_url: "http://www.lovejavascript.com/learnLinkManager/getLearnLinkList",
		ajax_type: "POST",
		query: {pluginId: 1},
		pageSize: 20
	};

	new Vue({
		el: '#app',
		data: {
			name: "testVue",
			option: option
		},
		components: {
			'vue-grid-manager': {
				template: '<table v-bind:grid-name="name"></table>',
				data: function () {
					return {
						name: option.gridManagerName
					}
				}
			}
		},
		mounted: function(){
			var table = document.querySelector('table[grid-name="' + this.option.gridManagerName + '"]');
			table.GM(this.option);
		}
	});
</script>

</body>
</html>




